<template>
  <q-dialog v-model="visible" seamless position="right">
    <q-card style="width: 13rem">
      <q-card-section class="row items-center no-wrap">
        <div class="text-h6 text-grey">运动被阻塞</div>
        <q-space />
        <q-btn flat round icon="close" v-close-popup />
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-list bordered separator class="rounded-borders">
          <q-item v-if="stuckAmrList.length === 0">
            <q-item-label style="margin: auto; color: #9e9e9e"
              >暂无机器人</q-item-label
            >
          </q-item>
          <q-item
            v-else
            clickable
            v-ripple
            :active="robot === index"
            @click="focus(poseMap[item.lastPose].pose, index)"
            active-class="bg-teal-2 text-black"
            v-for="(item, index) in stuckAmrList"
            v-bind:key="index"
          >
            <q-item-section>
              <q-item-label
                lines="1"
                class="text-bold text-subtitle1"
                :style="'color: ' + amrColor[item.device]"
                >{{ item.device }}</q-item-label
              >
              <q-item-label
                v-if="avoidMoving === item.device"
                class="text-positive text-bold"
                >正在前往避让点</q-item-label
              >
              <q-item-label
                v-else-if="avoidWaiting.includes(item.device)"
                class="text-secondary text-bold"
                >已到达避让点</q-item-label
              >
              <q-item-label
                >被阻塞点：{{ poseMap[item.lastPose].name }}</q-item-label
              >
              <q-item-label
                >运动目标：{{ poseMap[item.target].name }}</q-item-label
              >
              <q-item-label>阻塞AMR：{{ item.lockBy }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref, inject, onUnmounted, watch } from "vue";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api";

const robotColor = [
  "#1E90FF",
  "#EE82EE",
  "#40E0D0",
  "#3CB371",
  "#FFFF00",
  "#FF6347",
];

export default {
  name: "StuckAmrInMap",
  setup() {
    // 设备数据
    const stuckAmrList = inject("stuckAmrList");
    const devicesList = inject("devicesList");
    const amrColor = ref({});
    const poseMap = inject("poseMap");
    const visible = ref(false);
    // 选中的设备
    const robot = ref("");
    const pixiMap = inject("pixiMap");
    const avoidMoving = ref("");
    const avoidWaiting = ref([]);

    const mapFunction = inject("mapFunction");
    watch(mapFunction, (value) => {
      if (value !== "stuckAmrInMap") visible.value = false;
    });

    function getAvoidInfo() {
      api
        .get(useAPIStore().centerUrl + "navigation/avoid/moving")
        .then((rs) => {
          avoidMoving.value = rs.data;
        });
      api
        .get(useAPIStore().centerUrl + "navigation/avoid/waiting")
        .then((rs) => {
          avoidWaiting.value = rs.data;
        });
      amrColor.value = {};
      devicesList.value.forEach((amr, index) => {
        amrColor.value[amr.device] = robotColor[index % 6];
      });
      timer = setTimeout(() => {
        getAvoidInfo();
      }, 1000);
    }

    let timer;

    // 页面离开时
    onUnmounted(() => {
      clearTimeout(timer);
    });

    watch(visible, (value) => {
      if (!value) clearTimeout(timer);
    });

    return {
      visible,
      robot,
      stuckAmrList,
      avoidWaiting,
      avoidMoving,
      poseMap,
      robotColor,
      amrColor,
      show() {
        robot.value = "";
        mapFunction.value = "stuckAmrInMap";
        visible.value = true;
        getAvoidInfo();
      },
      // 选中
      focus(item, index) {
        robot.value = index;
        // 点位聚焦
        pixiMap.lookAt(item.position);
      },
    };
  },
};
</script>
